<template>
    <div class="fictionList" ref="fictionList">

        <!-- <div class="toTop">返回顶部</div> -->

        <div class="classTab">
            <div class="line"
            v-if="!(item.type == 'class' && $route.query.cid)"
            v-for="(item, index) in queryData" :key="index"
            >
                <div class="title">{{ item.title }}</div>
                <div class="line-item" style="width: calc();">
                    <div class="item"
                    :class="{avi : item.index == -1}"
                    @click="toQuery(item, {}, -1)"
                    >
                        全部
                    </div>
                    <div class="item"
                    @click="toQuery(item, t, i)"
                    :class="{avi : item.index == i}"
                    v-for="(t, i) in item.list" :key="i">
                        {{ t.title }}
                    </div>
                </div>
            </div>
        </div>

        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="这里没有你要的书,去搜搜看吧！"
        class="list"
        @load="onLoad"
        >
            <bookList :books="list"/>
        </van-list>

    </div>
</template>

<script>
    import { getFictionQueryData, getFictionList } from '@/api/fiction'
    import bookList from '@/components/book/bookList.vue'
    export default {
        components : {
            bookList
        },
        data() {
            return {
                queryData : [],
                list : [],
                loading : false,
                finished : false,
                total : 0,
                query : {
                    limit : 10,
                    page : 1,
                    minNumWord : undefined,
                    maxNumWord : undefined,
                    fictionClassId : this.$route.query.cid,
                    key : undefined,
                    minTime : undefined,
                    maxTime : undefined,
                    isEnd : undefined,
                }
            }
        },
        created() {
            this.getList()
            this.getQueryData()
        },
        methods: {
            getQueryData(){
                getFictionQueryData().then(res => {
                    if(res.code == 200){
                        res.data.forEach(n => {
                            n.index = -1
                        })
                        this.queryData = res.data
                    }
                })
            },
            getList(){
                this.query.limit = 10
                this.query.page = 1
                this.finished = false
                this.loading = false
                getFictionList(this.query).then(res => {
                    if(res.code == 200){
                        this.list = res.data.list
                        this.total = res.data.total
                        if (this.total <= this.page * this.limit) {
                            this.finished = true
                        }
                    }
                })
            },
            toQuery(item, t, i){
                item.index = i
                if (item.type == 'class') {
                    this.query.fictionClassId = t.fictionClassId
                } else if(item.type == "word") {
                    this.query.maxNumWord = t.maxNumWord
                    this.query.minNumWord = t.minNumWord
                } else if(item.type == "updateTime") {
                    this.query.minTime = t.minTime
                    this.query.maxTime = t.maxTime
                } else if(item.type == "sort") {
                    this.query.sort = t.sort
                } else if(item.type == "status") {
                    this.query.isEnd = t.isEnd
                }
                this.getList()
            },
            onLoad(){
                this.query.page++
                getFictionList(this.query).then(res => {
                    if(res.code == 200){
                        this.list.push(...res.data.list)
                        this.loading = false
                        if (this.total == this.list.length) {
                            this.finished = true
                        }
                    }
                })
            }
        },
    }
</script>

<style scoped>
.fictionList{
    padding: 10px;
    overflow-y: hidden;
    overflow-x: auto;
}

.classTab{

}
.classTab .line{
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.classTab .line .title{
}
.classTab .line .line-item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 10px;
}
.classTab .line .item{
    margin: 5px;
    font-size: 12px;
}
.classTab .line .item.avi{
    color: #ff7800;
}
</style>